<template>
  <div>
	<el-dialog
	  v-model="dialog.visible"
	  :title="dialog.title"
	  destroy-on-close
	  append-to-body
	  width="550px"
	  @close="closeDialog"
	>
		<el-table
		  :v-loading="loading"
		  :data="tableData"
		  style="width: 100%; margin-bottom: 20px"
		  row-key="id"
		>
			<el-table-column type="expand">
			  <template #default="props">
				<div style="padding: 0px;">
				  <el-table :data="props.row.children"  :show-header="false">
					<el-table-column label="序号" prop="index" width="60" align="center" />
					<el-table-column label="productName" prop="name" />
					<el-table-column label="状态"  align="center" width="100">
					  <template #default="scope">
						  <el-switch
						    :loading="loading.value"
						    v-model="scope.row.status"
						    inline-prompt
						    active-text="是"
						    inactive-text="否"
							active-value="1"
							inactive-value="0"
							@change="change(scope.row)"
						  />
					  </template>
					</el-table-column>
				  </el-table>
				</div>
			  </template>
			</el-table-column>
			<el-table-column prop="name" label="名称"  />
			<el-table-column prop="ip" label="IP"  />
		</el-table>

	</el-dialog>
  </div>
</template>

<script lang="ts" setup>
	
	import { listForUserAgent,saveForUserAgent} from "@/api/user"; 
	import {ref } from 'vue'
	/* import type {FormRules } from 'element-plus' */
	
	const loading = ref(false);
	const dialog = ref({
		visible:false,
		title:'',
	});
	
	const tableData=ref([])
	
	const load=()=>{
		loading.value=true;
		listForUserAgent({
			userId:user.value.id,
		})
		.then(({result}) => {
			 const _data=result
			tableData.value= _data
		})
		.catch((e) => {
		})
		.finally(() => {
			loading.value=false;
		});
	}
	
	const user=ref({});
	
	const openDialog=(row:object)=>{
		dialog.value.visible=true;
		dialog.value.title="指定GPU资源";
		user.value=row;
		load();
	}
	
	const change=(row:object)=>{
		loading.value=true;
		saveForUserAgent({
			userId:user.value.id,
			agentId:row.agentId,
			agentGpuIndex:row.index,
			status:row.status
		})
		.then(({message}) => {
			ElMessage.success(message);
		})
		.catch((e) => {
		})
		.finally(() => {
			loading.value=false;
		});
	}
	
	const closeDialog=()=>{
		dialog.value.visible=false;
		dialog.value.title="";
		user.value={};
		tableData.value=[];
	}
	
	defineExpose({
	  openDialog,closeDialog
	});
	
	onMounted(() => {
	});
</script>

<style>
</style>